<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@3"></script>
    <title>第五次作业二</title>
    <style>
        td {
            width: 180px;
        }

        table, table tr th, table tr td {
            border: 1px solid #ccc;
            text-align: center;
        }

        input {
            width: 100px;
        }
    </style>
</head>
<body>


<div id="app">
    <p v-show="shopping_trolley == null">购物车为空</p>
    <table v-if="shopping_trolley != null">
        <tr v-for="(i, index) in shopping_trolley" :key="index">
            <td>
                {{ i.commodity }}
            </td>
            <td>
                {{ i.price }}
            </td>
            <td>
                <button @click="i.count--">-</button>
                <span>{{ i.count }}</span>
                <button @click="i.count++">+</button>
            </td>
            <td>
                <button>移除</button>
            </td>
        </tr>
        <tr v-if="!isAdd">
            <td>
                <input v-model="commodity">
            </td>
            <td>
                <input v-model="count">
            </td>
            <td>
                <button @click="price--">-</button>
                <input v-model="price">
                <button @click="price++">+</button>
            </td>
            <td>
                <button @click="shoppingSubmit">提交</button>
            </td>
        </tr>
    </table>
    <button v-show="isAdd" @click="isAdd = !isAdd ">
        添加商品
    </button>
    <span>总价格：{{ totalPrice }}元</span>
</div>

<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                shopping_trolley: [
                    {commodity: "牙刷", count: 5, price: 10},
                    {commodity: "牙膏", count: 2, price: 20},
                    {commodity: "镜子", count: 3, price: 30},
                ],
                commodity: '',
                count: 0,
                price: 0,
                isAdd: true,
            }
        },
        computed: {
            totalPrice: {
                get() {
                    let price = 0
                    this.shopping_trolley.forEach(function (i) {
                        price += i.price * i.count
                    })
                    return price;
                }
            }
        },
        methods: {
            countSubtract: function (index) {
                const temp = {commodity: this.commodity, count: this.count, price: this.price}
                this.shopping_trolley.push(temp)
            },
            countAdd: function (index) {

            },
            shoppingAdd: function (index) {
                const temp = {commodity: "", count: 0, price: 0}
                this.shopping_trolley.push(temp)
            },

            shoppingSubmit: function () {
                const temp = {commodity: this.commodity, count: this.count, price: this.price}
                this.shopping_trolley.push(temp)
            }
        }

    }).mount('#app')
</script>
</body>
</html>